<template>
  <div class="fav-home-nav" ref="refNav">
    <!-- <div class="division" @click="showPicker = true">
      <div class="division-name">“{{ curDivision?.division }}”一本账</div>
      <SvgIcon icon-class="xiala" style="width: 15px" />
    </div> -->
    <div class="title">密码修改</div>
    <!-- <div class="search-wrapper">
      <SvgIcon icon-class="search" fontsize="24px" @click="handleSearchClick" />
    </div> -->
    <!-- <van-popup v-model:show="showPicker" position="top">
      <van-picker
        :columns="divisionList"
        :columns-field-names="{ text: 'division', value: 'division' }"
        @confirm="handleDivisionSiwtch"
        @cancel="showPicker = false"
      />
      <div class="dropdown">
        <div
          v-for="(item, idx) in divisionList"
          :key="item.division"
          class="dropdown-item"
          @click="handleDivisionClick(idx)"
        >
          {{ item.division }}
        </div>
      </div>
    </van-popup> -->
    <!-- <div v-if="showPicker" class="dropdown">
      <div
        v-for="(item, idx) in divisionList"
        :key="item.division"
        class="dropdown-item"
        @click="handleDivisionClick(idx)"
      >
        {{ item.division }}
      </div>
    </div> -->
    <!-- <div class="bottom-slot"><slot /></div> -->
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'
import { useRouter } from 'vue-router'
import SvgIcon from '@/components/SvgIcon'
import type { IDivisionItem } from '../index.vue'

defineOptions({
  name: 'FavHomeNav'
})

interface IProps {
  curDivision: IDivisionItem | null
  divisionList: IDivisionItem[]
}

const emit = defineEmits(['switch'])

const props = withDefaults(defineProps<IProps>(), {
  curDivision: null,
  divisionList: () => []
})

const router = useRouter()

const showPicker = ref<boolean>(false)
const refNav = ref<HTMLElement | null>(null)
onClickOutside(refNav, () => {
  showPicker.value = false
})

const handleSearchClick = () => {
  router.push('/search')
}

const handleDivisionClick = (e: number) => {
  emit('switch', e)
  showPicker.value = false
}
</script>

<style lang="less">
.fav-home-nav {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 16px;
  height: 115px;
  background: #0027e9 url('@/assets/background.png');
  background-size: cover;
  color: #fff;
  z-index: 1;

  .division {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8.97px;
    width: 109px;
    height: 25px;
    background: rgba(255, 255, 255, 0.36);
    border-radius: 999px;
    padding: 0px 7px;

    .division-name {
      flex-grow: 1;
      overflow: hidden;
      white-space: nowrap;
      text-emphasis: end;
    }
  }

  .search-wrapper {
    width: 109px;
    text-align: right;
  }

  .title {
    font-size: 19.23px;
    margin:30px auto 0px;
  }

  .dropdown {
    padding-top: 50px;
    // position: absolute;
    // left: 0;
    // top: 88px;
    width: 100%;
    background: #fff;
    // z-index: 100;

    .dropdown-item {
      font-size: 1.2rem;
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      color: #333;
      border-bottom: 1px solid #efefef;
    }
  }

  .bottom-slot {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
</style>
